<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>标准表达式语法-Standard Expression Syntax</title>
    <style>
        .content {
            color: red;
        }

        .first {
            color: #ffffff;
            background-color: #ab1e1e;
        }

        .even {
            background-color: #38B1B9;
        }

        .odd {
            background-color: #6A6AFF;
        }

        .alt {
            font-weight: bold;
            color: #FF2F2F;
        }

        ul {
            margin: 0;
        }
    </style>
</head>
<body>
<div>
    <h2>简单的表达式：</h2>
    <div>
        <h3>变量表达式：${...}</h3>
        <p th:text="${name}">/p>
    </div>
    <div>
        <h3>选择变量表达式：*{...}</h3>
        <ul th:object="${userModel}">
            <li>id：<span th:text="*{id}"></span></li>
            <li>姓名：<span th:text="*{name}"></span></li>
            <li>年龄：<span th:text="*{age}"></span></li>
        </ul>
    </div>
    <div>
        <h3>消息表达式（文字国际化表达式）：#{...}</h3>
        <p th:text="#{message.expressions}"></p>
    </div>
    <div>
        <h3>链接 URL 表达式：@{...}</h3>
        <a href="#" th:href="@{/user}">不带参数的</a>
        <a href="#" th:href="@{/expressionSyntax(name='廖化',age=27)}">带参数的</a>
        <a href="#" th:href="@{'/user/'+${userModel.id}(age=${userModel.age})}">动态参数地址</a>
    </div>

    <hr>

    <h2>文本-直接常量：</h2>
    <div>
        <h3>文本文字：'one text', 'Another one!',…</h3>
        <p th:text="'welcome to my website'"></p>
    </div>
    <div>
        <h3>数字文字：0, 34, 3.0, 12.3,…</h3>
        <p>今年是<span th:text="2016">2016</span>年</p>
        <p>去年是<span th:text="2016-1">2015</span>年</p>
    </div>
    <div>
        <h3>布尔文字：true, false</h3>
        <p th:if="${userModel.admin}">我是管理员</p>
        <p th:if="${!userModel.admin}">我不是管理员</p>
    </div>
    <div>
        <h3>null 文字：null</h3>
        <p th:if="${userModel.username}==null">用户名为空</p>
    </div>
    <div>
        <h3>文字标记：one, sometext, main,…</h3>
        <p th:class="content">动态添加样式class</p>
    </div>
    <div>
        <h3>添加文本：</h3>
        <p th:text="'我的姓名是：'+${userModel.name}+'!'"></p>
    </div>
    <div>
        <h3>文字替换：</h3>
        <p>方式一：<span th:text="|我的姓名是,${userModel.name}!|"></span></p>
        <p>方式二：<span th:text="'我的姓名是：' +${userModel.name}+'!'"></span></p>
        <p>方式三：<span th:text="${userModel.name} + '的年龄和id为：' + |${userModel.age},${userModel.id}|"></span></p>
    </div>
    <div>
        <h3>算数运算：+, -, *, / and %.</h3>
        <div>th:with - 定义临时变量</div>
        <p th:with="isEven=(${age}%2==0)">方式一：<span th:text="${isEven}"></span></p>
        <p th:with="isEven2=${age%2==0}">方式二：<span>[[${isEven2}]]</span></p>
    </div>
    <div>
        <h3>比较器与相等：gt (>), lt (<), ge (>=), le (<=), not (!), eq (==), neq/ne (!=).</h3>
        <p th:if="${age} gt 1" th:text="'我的年龄是：' + ((${age} <= 18) ? '我年方18，美貌如花' : '我已成年')"></p>
    </div>
    <div>
        <h3>条件表达式：</h3>
        <p>方式一：If-then-else: (if) ? (then) : (else)</p>
        <ul th:each="name,status : ${names}">
            <li th:class="${status.even} ? 'even' : 'odd'" th:text="*{name}"></li>
        </ul>
        <br>
        <ul th:each="name,row : ${names}">
            <li th:class="${row.odd} ? (${row.first} ? 'first' : 'even') : 'odd'" th:text="*{name}"></li>
        </ul>
        <p>方式二：If-then: (if) ? (then)</p>
        <ul th:each="name,row : ${names}">
            <li th:class="${row.even} ? 'alt'" th:text="*{name}"></li>
        </ul>
        <p>方式三：默认表达式：Default: (value) ?: (defaultvalue)</p>
        <div th:object="${userModel}">
            <p>姓名：<span th:text="*{username} ?: '(未设置姓名)'"></span></p>
            <p>姓名：<span th:text="*{username == null} ? *{name} : '(未设置姓名)'"></span></p>
            <p>姓名：<span th:text="*{username} ?: (*{admin} ? 'Admin' : #{default.username})"></span></p>
        </div>
    </div>
    <div>
        <h3>预处理（Preprocessing）：</h3>
        <p>未测试</p>
    </div>
</div>
</body>
</html>